<!DOCTYPE html>
<html lang="zxx">
<head>
    <title>FORT - 我参与过的活动</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">

    <!-- External CSS libraries -->
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap-submenu.css">

    <link rel="stylesheet" type="text/css" href="/css/bootstrap-select.min.css">
    <link rel="stylesheet" type="text/css" href="/css/magnific-popup.css">
    <link rel="stylesheet" href="/css/leaflet.css" type="text/css">
    <link rel="stylesheet" href="/css/map.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="/fonts/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/fonts/flaticon/font/flaticon.css">
    <link rel="stylesheet" type="text/css" href="/fonts/linearicons/style.css">
    <link rel="stylesheet" type="text/css" href="/css/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" type="text/css" href="/css/dropzone.css">
    <link rel="stylesheet" type="text/css" href="/css/slick.css">

    <!-- Custom stylesheet -->
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" type="text/css" id="style_sheet" href="/css/skins/default.css">

    <!-- Favicon icon -->
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">


    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link rel="stylesheet" type="text/css" href="/css/ie10-viewport-bug-workaround.css">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>
    <script src="js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <script src="/js/jquery-2.2.0.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/bootstrap-submenu.js"></script>
    <script src="/js/rangeslider.js"></script>
    <script src="/js/jquery.mb.YTPlayer.js"></script>
    <script src="/js/bootstrap-select.min.js"></script>
    <script src="/js/jquery.easing.1.3.js"></script>
    <script src="/js/jquery.scrollUp.js"></script>
    <script src="/js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="/js/leaflet.js"></script>
    <script src="/js/leaflet-providers.js"></script>
    <script src="/js/leaflet.markercluster.js"></script>
    <script src="/js/dropzone.js"></script>
    <script src="/js/slick.min.js"></script>
    <script src="/js/jquery.filterizr.js"></script>
    <script src="/js/jquery.magnific-popup.min.js"></script>
    <script src="/js/jquery.countdown.js"></script>
    <script src="/js/maps.js"></script>
    <!--<script  src="js/app.js"></script>-->

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/js/ie10-viewport-bug-workaround.js"></script>
    <!-- Custom javascript -->
    <script src="/js/ie10-viewport-bug-workaround.js"></script>
</head>
<body>

<!-- Main header start -->
<header class="main-header fixed-header-2">
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand company-logo" href="/index">
                <img src="/img/logos/black-logo.png" alt="logo">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav header-ml">
                    <li class="nav-item dropdown active">
                        <a class="nav-link " href="/activity" id="navbarDropdownMenuLink">
                            活动广场
                        </a>
                    </li>

                    <li class="nav-item dropdown active" id="myself">

                    </li>

                    <li class="nav-item dropdown active" id="admin_center">

                    </li>

                    <li class="nav-item dropdown megamenu-li">
                        <a class="nav-link " href="/about">关于我们</a>
                    </li>
                    <li class="nav-item dropdown megamenu-li">
                        <a class="nav-link " href="/contact">与管理员联系</a>
                    </li>
                </ul>
                <ul class="navbar-buttons ml-auto d-none d-xl-block d-lg-block">
                    <div>
                        <ul>
                            <li>
                                <div class="dropdown btns">
                                    <a class="dropdown-toggle" data-toggle="dropdown" id="status"></a>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="/forgot-password">重置密码</a>
                                        <a class="dropdown-item" id="logout">退出</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </ul>
            </div>
        </nav>
    </div>
</header>
<!-- Main header end -->

<!-- Dashboard start -->
<div class="dashboard">
    <div class="container-fluid">
        <div class="row" style="height: 100vh">
            <div class="col-lg-2 col-md-12 col-sm-12 col-pad">
                <div class="dashboard-nav d-none d-xl-block d-lg-block">
                    <div class="dashboard-inner">
                        <h4>账户</h4>
                        <ul>
                            <li><a href="/my-profile"><i class="flaticon-user"></i>个人中心</a></li>
                            <li><a href="/submit-property"><i class="flaticon-plus"></i>商家认证</a></li>
                        </ul>
                        <h4>活动</h4>
                        <ul>
                            <li class="active"><a href="/my-properties"><i class="flaticon-apartment"></i>我参与过的活动</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-9 col-md-12 col-sm-12 col-pad">
                <div class="content-area5">
                    <div class="dashboard-content">
                        <div class="dashboard-list">
                            <h3>我参与过的活动</h3>

                            <table class="manage-table" id="lottery_list">
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- Page navigation start -->
                <div class="pagination-box hidden-mb-45 text-center" id="page_nav_area">

                </div>
            </div>
        </div>
    </div>
</div>

<!-- Dashboard end -->
<!--查看是否中奖的模态框-->
<div class="modal" id="isWinModal" tabindex="-1" role="dialog">
    <div class="modal-dialog  modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    查看是否中奖
                </h5>
            </div>
            <div class="modal-body">
                <form>
                    <div class="modal-body" id="value" style="color: red"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    const token = localStorage.getItem("token");
    const userNo = localStorage.getItem("userNo");

    $(function f() {
        //token存在
        if (token != null && token != '') {
            $.ajax({
                url: "http://localhost:5761/lottery-system-user/user/api/user/testToken",
                // url: "http://localhost:5710/user/api/user/testToken?token=" + token,
                type: "GET",
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("token", token);
                },
                success: function (result) {
                    // console.log(result);
                    if (result.code == 999) {
                        alert(result.message);
                        localStorage.removeItem("token");
                        localStorage.removeItem("userNo");
                        return window.location.href = "http://localhost/login";
                    }
                    if (result.code == 200) {
                        //正常
                        $("#myself").append("<a class='nav-link' href='/my-profile'>个人中心</a>");
                        var url = result.data.headImgUrl;
                        document.getElementById("status").innerHTML = "<img src=" + url + " alt='avatar' >" + result.data.username;
                        //退出
                        $("#logout").click(function () {
                            localStorage.removeItem("token");
                            localStorage.removeItem("userNo");
                            window.location.href = "http://localhost/login";
                        });
                        //如果是商家身份，则添加菜单
                        if (result.data.userType == 1) {
                            $("#admin_center").append("<a class='nav-link ' href='/lottery_management' >管理中心</a>");
                        }
                        to_page(userNo, 1);
                        return;
                    } else {
                        //token过期或异常
                        localStorage.removeItem("token");
                        localStorage.removeItem("userNo");
                        return window.location.href = "http://localhost/login";
                    }
                }
            });
        } else {
            //token不存在
            return window.location.href = "http://localhost/login";
        }
    });

    function to_page(userNo, pageNum) {
        $.ajax({
            url: "http://localhost:5761/lottery-system-lottery/lottery/api/auth/lottery/hasJoin/" + userNo,
            type: "GET",
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", token);
            },
            data: "pageNum=" + pageNum,
            success: function (result) {
                // console.log(result);
                getLotterys(result);
                build_page_nav(result);
            }
        });
    }

    function getLotterys(result) {
        $("#lottery_list tbody").empty();
        var list = result.data.list;
        // console.log(list);
        $.each(list, function (index, item) {
            var imagTd = $("<td class='listing-photoo'></td>");

            var carouseTd = $("<div id='carouselExampleIndicators" + index + "' class='carousel slide col-lg-12' data-ride='carousel'></div>");

            var olnumTd = $("<ol class='carousel-indicators'  id='olnum" + index + "'></ol>");

            var lunbotuTd = $("<div class='carousel-inner' id='lunbotu" + index + "'></div>");

            var imagList = item.prizeDTOList;
            // console.log(imagList);
            $.each(imagList, function (imag_index, imag_item) {
                if (imag_index == 0) {
                    $("<li class='active' data-target='#carouselExampleIndicators" + index + "' data-slide-to=" + imag_index + "></li>").appendTo(olnumTd);
                    $("<div class='carousel-item active'><img alt='...' class='d-block w-100' src=" + imag_item.prizeImagUrl + " /></div>").appendTo(lunbotuTd);
                } else {
                    $("<li data-target='#carouselExampleIndicators" + index + "' data-slide-to=" + imag_index + "></li>").appendTo(olnumTd);
                    $("<div class='carousel-item '><img alt='...' class='d-block w-100' src=" + imag_item.prizeImagUrl + " /></div>").appendTo(lunbotuTd);
                }
            });
            olnumTd.appendTo(carouseTd);
            lunbotuTd.appendTo(carouseTd);
            carouseTd.appendTo(imagTd);

            var titleTd = $("<td class='title-container'><h2><a href='/activity-details?id=" + item.id + "'>" + item.lotteryTitle + "</a></h2><h5 class='d-none d-xl-block d-lg-block d-md-block'>" + item.startTime + "~" + item.dueTime + "</h5></td>");
            var statusTd = $("<td class='expire-date' ></td>").append("<h5 style='color: red'>" + item.result + "</h5>");
            var winRecordBtn = $("<button class='btn btn-xs btn-success win_btn' style='background-color: #ff521e;border-color: #ff521e'><i class='fa fa-th-list'></i>查看是否中奖</button>");
            winRecordBtn.attr("win_id", item.id);
            statusTd.append(winRecordBtn);

            $("<tr class='responsive-table'></tr>").append(imagTd).append(titleTd).append(statusTd).appendTo("#lottery_list tbody");
        });
    }

    function build_page_nav(result) {
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");
        //上一页
        var prePageLi = $("<li></li>").append($("<a></a>").addClass("page-link").append("&laquo;"));
        if (result.data.hasPreviousPage == false) {
            prePageLi.addClass("page-item disabled");
        } else {
            prePageLi.click(function () {
                to_page(userNo, result.data.pageNum - 1);
            });
        }
        //下一页
        var nextPageLi = $("<li></li>").append($("<a></a>").addClass("page-link").append("&raquo;"));
        if (result.data.hasNextPage == false) {
            nextPageLi.addClass("page-item disabled");
        } else {
            nextPageLi.click(function () {
                to_page(userNo, result.data.pageNum + 1);
            });
        }
        ul.append(prePageLi);
        $.each(result.data.navigatepageNums, function (index, item) {
            var numLi = $("<li></li>").append($("<a></a>").addClass("page-link").append(item));
            if (result.data.pageNum == item) {
                numLi.addClass("page-item active");
            }
            numLi.click(function () {
                to_page(userNo, item);
            });
            ul.append(numLi);
        });
        ul.append(nextPageLi);
        var navEle = $("<nav aria-label='Page navigation example'></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

    $(document).on("click", ".win_btn", function () {
        var id = $(this).attr("win_id");
        $.ajax({
            url: "http://localhost:5761/lottery-system-lottery/lottery/api/auth/lottery/isWin/" + id,
            type: "GET",
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", token);
            },
            data: {
                userNo: userNo
            },
            success: function (result) {
                // console.log(result);
                if (result.code == 200) {
                    // alert(result.data.flag+"\n"+result.data.prizeLevel+"\n"+result.data.prizeContent);
                    var value = result.data.flag + "\n" + result.data.prizeLevel + "\n" + result.data.prizeContent;
                    document.getElementById("value").innerText = value;
                }
            }
        });
        $("#isWinModal").modal({
            backdrop: "static"
        });
    });


</script>

</body>
</html>